<!--
 * @Author: wang_sheshe
 * @Date: 2021-08-21 14:54:59
 * @LastEditTime: 2021-08-24 14:12:01
 * @Description: 设备台账
-->
<template>
    <article class="bg_4dbfae">
        <!-- 标题-->
        <div class="title-bg">
            <Theader :title="title">
                <template slot="header_arrow">
                    <van-icon size="25" name="arrow-left" />
                </template>
            </Theader>
        </div>
        <div class="tabs">
            <van-tabs v-model="active" title-active-color="#0EB295" color="#0EB295" :line-width="lineWidth">
                <van-tab @click="tabClick('1')" :title="'资产参数'">
                    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                        <div class="listBox">
                            <div class="baseInfo">
                                <van-field 
                                    label="设备状态"  
                                    readonly 
                                    :border="false"
                                    v-model="taskDetail.substationName"
                                />
                                <van-field 
                                    label="额定电压" 
                                    readonly 
                                    :border="false"
                                    v-model="taskDetail.type" 
                                />
                                <van-field 
                                    label="额定电流" 
                                    readonly 
                                    :border="false" 
                                    v-model="taskDetail.time" 
                                />
                                <van-field 
                                    label="工作班组" 
                                    :border="false"  
                                    readonly 
                                    v-model="taskDetail.content" 
                                />
                                <van-field 
                                    label="所属变电站" 
                                    :border="false"  
                                    readonly 
                                    v-model="taskDetail.content" 
                                />
                                <van-field 
                                    label="所属间隔" 
                                    :border="false"  
                                    readonly 
                                    v-model="taskDetail.content" 
                                />
                                <van-field 
                                    label="投运日期" 
                                    :border="false"  
                                    readonly 
                                    v-model="taskDetail.content" 
                                />
                            </div>
                        </div>
                    </van-pull-refresh>
                </van-tab>
                <van-tab @click="tabClick('2')" :title="'物理参数'">
                    <div class="listBox">
                        <div class="baseInfo">
                            <van-field 
                                label="设备状态"  
                                readonly 
                                :border="false"
                                v-model="taskDetail.substationName"
                            />
                            <van-field 
                                label="额定电压" 
                                readonly 
                                :border="false"
                                v-model="taskDetail.type" 
                            />
                            <van-field 
                                label="额定电流" 
                                readonly 
                                :border="false" 
                                v-model="taskDetail.time" 
                            />
                            <van-field 
                                label="工作班组" 
                                :border="false"  
                                readonly 
                                v-model="taskDetail.content" 
                            />
                            <van-field 
                                label="所属变电站" 
                                :border="false"  
                                readonly 
                                v-model="taskDetail.content" 
                            />
                            <van-field 
                                label="所属间隔" 
                                :border="false"  
                                readonly 
                                v-model="taskDetail.content" 
                            />
                            <van-field 
                                label="投运日期" 
                                :border="false"  
                                readonly 
                                v-model="taskDetail.content" 
                            />
                        </div>
                    </div>
                </van-tab>
                <van-tab @click="tabClick('2')" :title="'运行参数'">
                    <div class="listBox">
                        <div class="baseInfo">
                            <van-field 
                                label="设备状态"  
                                readonly 
                                :border="false"
                                v-model="taskDetail.substationName"
                            />
                            <van-field 
                                label="额定电压" 
                                readonly 
                                :border="false"
                                v-model="taskDetail.type" 
                            />
                            <van-field 
                                label="额定电流" 
                                readonly 
                                :border="false" 
                                v-model="taskDetail.time" 
                            />
                            <van-field 
                                label="工作班组" 
                                :border="false"  
                                readonly 
                                v-model="taskDetail.content" 
                            />
                            <van-field 
                                label="所属变电站" 
                                :border="false"  
                                readonly 
                                v-model="taskDetail.content" 
                            />
                            <van-field 
                                label="所属间隔" 
                                :border="false"  
                                readonly 
                                v-model="taskDetail.content" 
                            />
                            <van-field 
                                label="投运日期" 
                                :border="false"  
                                readonly 
                                v-model="taskDetail.content" 
                            />
                        </div>
                    </div>
                </van-tab>
                <van-tab @click="tabClick('2')" :title="'设备履历'">
                    <div class="listBox">
                        <van-steps direction="vertical" inactive-icon="stop-circle-o" active-icon="stop-circle-o"
                           active-color="#17b49b" inactive-color="#17b49b">
                                <van-step>
                                    <h3 class="color333">2016-07-11</h3>
                                    <div class="message margin15">
                                        <div class="messageBox">
                                            <div class="trackTitle margin15"> 
                                                <van-image style="margin-right: 5px;vertical-align: middle;"  width="20" height="20"  :src="defect" />
                                                 缺陷记录</div>
                                            <div class="messageTextDanger ml1rem">大量发热有起火风险</div>
                                        </div>
                                    </div>
                                    <div class="mt1rem colorccc margin15">
                                        <div class="ml1rem">登记人：刘安之</div>
                                    </div>
                                    <div class="mt1rem colorccc margin15">
                                        <div class="ml1rem">登记人：2021/02/12 12:00:00</div>
                                    </div>
                                </van-step>
                                <van-step>
                                    <h3 class="color333">2016-07-11</h3>
                                    <div class="message margin15">
                                        <div class="messageBox ">
                                            <div class="trackTitle margin15"> 
                                                <van-image style="margin-right: 5px;vertical-align: middle;"  width="20" height="20"  :src="danger" />
                                                 隐患记录</div>
                                           
                                            <div class="messageTextWaring ml1rem">大量发热有起火风险</div>
                                        </div>
                                    </div>
                                    <div class="mt1rem colorccc margin15">
                                        <div class="ml1rem">登记人：刘安之</div>
                                    </div>
                                    <div class="mt1rem colorccc margin15">
                                        <div class="ml1rem">登记人：2021/02/12 12:00:00</div>
                                    </div>
                                </van-step>
                                <van-step>
                                    <h3 class="color333">2016-07-11</h3>
                                    <div class="message margin15">
                                        <div class="messageBox">
                                            <div class="trackTitle margin15">
                                                <van-image style="margin-right: 5px;vertical-align: middle;"  width="20" height="20"  :src="record" />
                                                 停电实验记录</div>
                                            <div class="messageTextRecd ml1rem">停电实验记录一切正常</div>
                                        </div>
                                    </div>
                                    <div class="mt1rem colorccc margin15">
                                        <div class="ml1rem">登记人：刘安之</div>
                                    </div>
                                    <div class="mt1rem colorccc margin15">
                                        <div class="ml1rem">登记人：2021/02/12 12:00:00</div>
                                    </div>
                                </van-step>
                       </van-steps>
                    </div>
                </van-tab>
            </van-tabs>
        </div>
        <Tabbar></Tabbar>
    </article>
</template>

<script type="text/javascript">
    import Theader from "../component/header"
    import Tabbar from '@/components/tabbar'
    export default {
        name: 'message',
        components: {
            Theader,
            Tabbar
        },
        data() {
            return {
                title: "设备台账",
                active: 0,// 当前选中
                infrom: "6",//通知数量
                myMessage: "15",// 消息数量
                lineWidth: "2.8rem",// 下划线宽度
                infromList: [],// 通知list
                myMessageList: [],// 消息list
                // 通知 控制变量
                loading: false,
                finished: false,
                refreshing: false,
                taskDetail: {
                    substationName:"东善桥变",
                    type:"红外测温记录",
                    time:"2021/03/21-2021/05/23",
                    content:"红外测温记录填写",
                },
                danger:require('../../images/icon-overhaul-form-danger.png'),
                defect:require('../../images/icon-overhaul-form-defect.png'),
                record:require('../../images/icon-overhaul-form-record.png'),
            }
        },

        computed: {

        },

        methods: {
            /**
             * @description:通知/消息切换
             * @param {*} type
             * @return {*}
             */
            tabClick(type) {
                if (type == "1") {
                    this.$set(this, "lineWidth", "2.8rem")
                } else {
                    this.$set(this, "lineWidth", "5.6rem")
                }
            },
            /**
             * @description: 通知加载跟多
             * @param {*}
             * @return {*}
             */
            onLoad() {
                setTimeout(() => {
                    if (this.refreshing) {
                        this.infromList = [];
                        this.refreshing = false;
                    }

                    for (let i = 0; i < 10; i++) {
                        this.infromList.push(this.infromList.length + 1);
                    }
                    this.loading = false;

                    if (this.infromList.length >= 40) {
                        this.finished = true;
                    }
                }, 1000);
            },
            /**
             * @description: 通知下拉刷新
             * @param {*}
             * @return {*}
             */
            onRefresh() {
                // 清空列表数据
                this.finished = false;
                // 重新加载数据
                // 将 loading 设置为 true，表示处于加载状态
                this.loading = true;
                this.onLoad();
            },
            /**
             * @description: 跳转消息内容
             * @param {*} item
             * @return {*}
             */
            toContent(item) {
                this.$router.push({
                    name: "messageCon",
                    params: item
                });
            }
        },

        watch: {

        },
        mounted() {

        },
        created() {
            console.log(111);
        },

    }
</script>

<style scoped>
    article {
        display: flex;
        flex-direction: column;
        height: 100vh;
    }

    .bg_4dbfae {
        background: #fff !important;
    }
    .colorccc{
        color: #ADADAD;
        font-size: 12px;
    }
    .title-bg {
        margin-top: 5%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-self: center;
    }

    .tabs {
        margin-top: 5%;
    }

    .infromTitle {
        color: #333333;
        font-family: Source Han Sans CN;
        font-weight: regular;
        font-size: 15px;
        line-height: normal;
        letter-spacing: 0px;
        text-align: left;
        display: flex;
    }

    .infromDate {
        color: #999999;
        font-family: Source Han Sans CN;
        font-weight: regular;
        font-size: 13px;
        line-height: normal;
        letter-spacing: 0px;
        text-align: left;
        margin-top: 0.5rem;
    }

    .listBox {
        height: calc(100vh - 125px);
        background-color: #f5f6fa !important;
        overflow-y: auto;
    }

    .van-list {
        width: 95%;
        margin: 0 auto;
    }

    .triangle {
        width: 0;
        height: 0;
        border-top: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid red;
        -webkit-transform: rotate(92deg);
        transform: rotate(-315deg);
        margin-left: 1rem;
    }

    .newMessage {
        width: 3rem;
        height: 1rem;
        display: inline-block;
        border-radius: 4px;
        background: #EB3B3B;
        color: #FFFFFF;
        font-family: Source Han Sans CN;
        font-weight: regular;
        font-size: 0.5rem;
        line-height: normal;
        letter-spacing: 0px;
        text-align: center;
        margin-left: -0.3rem;
    }
    .baseInfo{
        margin: 10px;
    }
    .baseInfo /deep/ .van-field__label{
        width: 6.5rem;
        color:#747474;
    }
    .baseInfo /deep/ .van-field__control{
        text-align: right;
        color:#343434;
    }
    .messageTextDanger{
        height: 35px;
        line-height: 35px;
        background: #F4B3BB;
        color: #DD223A !important;
        border-radius: 5px;
        padding-left: 15px;
    }
    .messageTextRecd{
        height: 35px;
        line-height: 35px;
        background: #89D9CB;
        color: #18B499 !important;
        border-radius: 5px;
        padding-left: 15px;
    }
    .messageTextWaring{
        height: 35px;
        line-height: 35px;
        background: #FAD099;
        color: #F6A63D !important;
        border-radius: 5px;
        padding-left: 15px;
   }
    .trackTitle{
        color: #3C3C3C;
    }
    h3{
        margin-top: 0px;
        color: #3C3C3C !important;
    }
    .margin15{
        margin-bottom: 10px !important;
    }
</style>